<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 50%;
            border: 1px red solid;
            /* border-spacing: 0; */
            border-collapse: collapse;
        }

        th, td{
            border: 1px red solid;
        }

        /* 
            如果表格中没有使用tbody而是直接使用tr 
                浏览器会自动创建一个tbody包含写的所有tr
        */
        tr:nth-child(odd){
            background-color: orange;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>日期</th>
                <th>收入</th>
                <th>支出</th>
                <th>合计</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>A1</td>
                <td>B1</td>
                <td>C1</td>
                <td>D1</td>
            </tr>
            <tr>
                <td>A2</td>
                <td>B2</td>
                <td>C2</td>
                <td>D2</td>
            </tr>
            <tr>
                <td>A3</td>
                <td>B3</td>
                <td>C3</td>
                <td>D3</td>
            </tr>
            <tr>
                <td>A4</td>
                <td>B4</td>
                <!-- colspan 横向合并单元格 -->
                <!-- rowspan 纵向合并单元格 -->
                <td colspan="2">C4</td>
            </tr>
        </tbody>

        <tfoot>
            <td></td>
            <td></td>
            <td>合计</td>
            <td>xxx</td>
        </tfoot>

    </table>
</body>

</html>